<template>
  <div id="app">
       <h4>请选择你喜欢的专栏</h4>
       <div v-for='item in list' :key = 'item.id' class='box'>
       <input type="checkbox"  :value="item"  v-model="hobby" > {{item}}
       </div>
       <ul>
      <li v-for='item in hobby' :key = 'item.id' >{{item}}</li>
     </ul>
  </div>
</template>

<script>


export default {
  name: 'App',
  data(){
    return{
       hobby:[],
       list:["科幻", "喜剧", "动漫", "冒险", "科技", "军事", "娱乐", "奇闻"]
    }
    },
   }

</script>

<style>
   .box{
    display: inline-block;
   }
  </style>

